<script setup lang="ts">
import {DictOptions} from "@/utils/common-types";

/**
 * 使用方法1. <x-tag :value="someValue">状态</x-tag> 自定义内容
 * 使用方法2. <x-tag :value="someValue" :options="statusOptions"/> 自动格式化了内容
 *
 *  value对应的值: 1-30对应 type effect round
 *  如果是字符串,暂时没有作出区别
 *
 */
const attrs = useAttrs()
const props = defineProps<{
  value: number | string | boolean,
  options?: DictOptions[] // 用来格式化tag里面的文字的
}>()

type TypeType = "success" | "info" | "warning" | "danger" | ""
type EffectType = "dark" | "light" | "plain"
type RoundType = boolean
type OptionTypes = {
  type: TypeType
  effect: EffectType
  round: RoundType
}

function getResult(num: number): OptionTypes {
  const defaultValues: OptionTypes = {type: 'danger', effect: 'light', round: false}
  num = parseInt(num + '')
  if (num < 0) {
    return defaultValues
  }
  const typeArr: TypeType[] = ["success", "info", "warning", "danger", ""]
  const effectArr: EffectType[] = ["plain","light", "dark"]
  const roundArr: RoundType[] = [false, true]
  if (num > 30) {
    num = num % 30
  }
  for (let x = 0; x <= 4; x++) {
    for (let y = 0; y <= 2; y++) {
      for (let z = 0; z <= 1; z++) {
        if (x + y * 5 + z * 15 + 1 === num) {
          return {type: typeArr[x], effect: effectArr[y], round: roundArr[z]}
        }
      }
    }
  }
  return defaultValues
}

const optionTypes = computed<OptionTypes>(() => {
  const {value} = props
  if (typeof value === 'number') {
    return getResult(value)
  } else if (typeof value === 'boolean') {
    return value ? getResult(5) : getResult(4)
  } else {
    return getResult(0)
  }
})

const tagName = computed(() => {
  const {options, value} = props
  if (Array.isArray(options) && options.length > 0) {
    return options.find(item => item.code === value)?.name;
  }
  return ''
})

</script>

<template>
  <el-tag size="small" :effect="optionTypes.effect" :type="optionTypes.type" :round="optionTypes.round" v-bind="attrs">
    <template v-if="tagName">
      {{ tagName }}
    </template>
    <template v-else>
      <slot/>
    </template>
  </el-tag>
</template>